<!-- 首页 -->
<template>
	<div class="top">
		<div>
			<Logo></Logo>
		</div>
		<div>
			<svg-load name="user" class="rightImg" @click="openSideBar"></svg-load>
		</div>
	</div>

	<div>
		<!-- ✅ 加入 :teleport="false" -->
		<van-popup
			v-model:show="show"
			position="left"
			class="sidebar"
			:teleport="false"
			@close="closeSideBar"
		>
			<SideBar @closeSideBar="closeSideBar"></SideBar>
		</van-popup>

		<!-- 钱包信息区 -->
		<div class="wallet-container">
			<div class="wallet-card">
				<div class="balance-info">
					<div class="balance-title">{{ _t18('asset_account', ['ebc']) }}(USDT)</div>
					<div class="balance-number">{{ priceFormat(amountSum) || 0 }}</div>
				</div>
				<div class="action-btns">
					<van-button 
						type="primary" 
						round 
						class="deposit-btn"
						@click="handleDeposit"
					>
						{{ _t18(`home_recharge`, ['latcoin']) }}
					</van-button>
					<van-button 
						type="default" 
						round 
						class="withdraw-btn"
						@click="handleWithdraw"
					>
						{{ _t18(`quick_withdrawal`) }}
					</van-button>
				</div>
			</div>
		</div>
	</div>
	
	<!-- 合约跟单卡片 -->
	<div class="contract-container">
	  <van-swipe class="contract-swipe" :loop="false" indicator-color="#7B61FF">
	    <van-swipe-item v-for="(item, index) in 5" :key="index">
	      <div class="contract-card">
	        <!-- 无限符号 -->
	        <div class="infinity-symbol">
	          <span class="beta">β</span>
	          <svg class="infinity" viewBox="0 0 128 32">
	            <path d="M12 16C12 9.372 17.372 4 24 4C30.628 4 36 9.372 36 16C36 22.628 30.628 28 24 28C17.372 28 12 22.628 12 16ZM116 16C116 9.372 110.628 4 104 4C97.372 4 92 9.372 92 16C92 22.628 97.372 28 104 28C110.628 28 116 22.628 116 16Z"
	                  stroke="currentColor" fill="none" stroke-width="2"/>
	          </svg>
	        </div>
	
	        <div class="content">
	          <h3 class="title">{{ _t18('contract_copy') }}</h3>
	          <p class="desc">{{ _t18('smart_copy_setting_line1') }}<br>{{ _t18('smart_copy_setting_line2') }}</p>
	          <van-button 
	            round 
	            class="experience-btn"
	            @click="dispatchCustomEvent('event_serviceChange')"
	          >
	            {{ _t18('experience_now') }}
	          </van-button>
	        </div>
	
	        <div class="page-indicator">{{ index + 1 }}/5</div>
	      </div>
	    </van-swipe-item>
	  </van-swipe>
	</div>
	
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { useTradeStore } from '@/store/trade/index'
import { useMainStore } from '@/store/index.js'
import SideBar from '@/views/home/sidebar/index.vue'
import { useAssetStore } from '@/store/asset.js'
import { dispatchCustomEvent } from '@/utils'
import { priceFormat } from '@/utils/decimal.js'
import { useUserStore } from '@/store/user/index.js'
import { storeToRefs } from 'pinia'

let userStore = useUserStore()
const { asset } = storeToRefs(userStore)
const assetDetails = computed(() => {
  let list = []
  asset.value.forEach((item) => {
    if (item.type == '1') {
      let obj = {}
      obj['keyong'] = priceFormat(item.availableAmount)
      obj['zhanyong'] = priceFormat(item.occupiedAmount)
      obj['zhehe'] = priceFormat(item.exchageAmount)
      if (item.symbol == 'usdt') {
        obj['icon'] = 'usdt'
        obj['title'] = 'USDT'
        list.unshift(obj)
      } else {
        obj['title'] = item.symbol?.replace('usdt', '').trim().toLocaleUpperCase()
        obj['icon'] = item.symbol?.replace('usdt', '').trim()
        list.push(obj)
      }
    }
  })
  return list
})

const amountSum = computed(() => {
  let sum = 0
  for (let i = 0; i < assetDetails.value.length; i++) {
    sum += Number(assetDetails.value[i].zhehe)
  }
  return priceFormat(sum)
})

const router = useRouter()
const tradeStore = useTradeStore()
const mainStore = useMainStore()
const show = ref(false)

const openSideBar = () => {
	show.value = true
}
const closeSideBar = () => {
	show.value = false
}

const handleDeposit = () => {
	router.push('/recharge')
}
const handleWithdraw = () => {
	router.push('/withdraw')
}
</script>

<style lang="scss" scoped>
/* 顶部 Header */
.top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	height: 50px;
	position: relative;
	z-index: 100; /* ✅ 保证 header 内容（含 logo）在正常层级显示 */

	.rightImg {
		width: 24px;
		height: 24px;
		cursor: pointer;
	}
}

/* 钱包容器 */
.wallet-container {
	padding: 15px;
	margin-top: 10px;

	.wallet-card {
		background: var(--ex-home-box-background-color);
		border-radius: 12px;
		padding: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

		.balance-info {
			margin-bottom: 24px;
			.balance-title {
				font-size: 14px;
				color: var(--ex-passive-font-color);
				margin-bottom: 6px;
			}
			.balance-number {
				font-size: 28px;
				font-weight: 600;
				color: var(--ex-default-font-color);
			}
		}

		.action-btns {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 12px;

			:deep(.van-button) {
				height: 44px;
				font-size: 16px;
				border: none;
				&.deposit-btn {
					background: linear-gradient(135deg, #B8A2FF, #9B7DFF);
					color: white;
				}
				&.withdraw-btn {
					background: linear-gradient(135deg, #EDE8FF, #E0D6FF);
					color: #666;
				}
			}
		}
	}
}

/* 原侧边栏样式 */
:deep(.sidebar) {
	margin-top: -1px;
	max-width: var(--ex-max-width);
	width: 64%;
	left: auto;
	height: 100%;
}

/* ✅ LOGO 正常显示，但层级略低于弹层 */
:global(.topbar-logo),
:global(img.topbar-logo) {
	position: fixed;
	top: 0;
	left: 40px;
	width: 100px;
	height: 50px;
	object-fit: contain;
	z-index: 2000 !important; /* ✅ 让 logo 正常显示在页面上 */
}


/* 合约卡片 */
.contract-container {
  padding: 0 15px 20px;
  margin-top: -10px;
  .contract-swipe {
    border-radius: 16px;
    overflow: visible;
    .contract-card {
      position: relative;
      height: 160px;
      background: #000;
      padding: 20px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      .infinity-symbol {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 100px;
        height: 30px;
        color: rgba(255, 255, 255, 0.1);
        .beta {
          position: absolute;
          top: -8px;
          left: 50%;
          transform: translateX(-50%);
          color: #7B61FF;
          font-size: 28px;
          font-weight: 900;
          font-family: Arial;
        }
      }
      .content {
        position: relative;
        z-index: 2;
        padding-top: 10px;
        .title {
          color: #FFF;
          font-size: 20px;
          margin-bottom: 8px;
          font-weight: 600;
        }
        .desc {
          color: rgba(255, 255, 255, 0.8);
          font-size: 13px;
          line-height: 1.5;
          margin-bottom: 25px;
        }
      }
      .experience-btn {
        background: linear-gradient(90deg, #2f2161, #8877c9);
        color: white;
        border: none;
        padding: 8px 32px;
        font-weight: 500;
      }
      .page-indicator {
        position: absolute;
        bottom: 15px;
        right: 15px;
        color: rgba(255, 255, 255, 0.5);
        font-size: 12px;
        letter-spacing: 0.5px;
      }
    }
  }
}


</style>

